<template>
    <ZkModalVue  :title="title" :size="'xl'" :visible="visible" @cancel="handleCancel" @ok="handleOk">
        <ZkList ref="table" rowKey="id" :type="2" :searchs="searchs" :columns="columns" :data="loadData" :rowSelection="rowSelection"></ZkList>
    </ZkModalVue>
</template>
<script>
    import { ZkList, InputTypeEnum } from '@/appBase';
    import { queryUnallocatedUserList } from '@/api/role';
    import ZkModalVue from '@/appBase/ZkModal.vue';
   
    export default {
        name: 'SelectUser',
        components: {
            ZkList,
            ZkModalVue
        },
        data() {
            return {
                title: "选择用户",
                selectedRowKeys:[],
                visible:false,
                id:'',
                // 角色 Id
                roleId:'',
                // 查询
                searchs: [
                    { title: "用户名称", dataIndex: 'userName' },
                    { title: "手机号码", dataIndex: 'phonenumber', type: InputTypeEnum.NUMBER }
                ],
                // 表头
                columns: [
                    { title: "用户名称", dataIndex: "id", width: '140px', maxLength: 10 },
                    { title: "用户名称", dataIndex: "userName", width: '140px', maxLength: 10 },
                    { title: "用户昵称", dataIndex: "nickName", width: '150px', maxLength: 10 },
                    { title: "手机", dataIndex: "phonenumber", width: '100px' },
                    { title: "创建时间", dataIndex: "createTime", width: '150px',format:true },
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: (queryParams, parameter) => {
                    if (this.roleId) {
                         const params = {
                            ...queryParams,
                            roleId:this.roleId
                        };
                        return queryUnallocatedUserList(params, parameter).then((result) => {
                            result.data = result.data.map(i=>{
                                i.id = i.userId;
                                return i;
                            });
                            return result;
                        }); 
                    }
                },
                rowSelection:{
                    selectedRowKeys: [],
                    onChange:(selectedRowKeys, selectedRows)=>{
                        this.rowSelection.selectedRowKeys = [...selectedRowKeys];
                    }
                }
            }
        },
        methods: {
            show(param) {
                this.id = param.id;
                this.roleId = param.roleId;
                this.rowSelection.selectedRowKeys = [];
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs.table.reset();
                    this.$refs.table.refresh();
                })
            },
            handleOk() {
                if (this._onOk) this._onOk(this.rowSelection.selectedRowKeys);
                this.visible=false;
            },
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            }
        }
    }
</script>